<template>
  <div v-if="order">
    <a-modal
      title="订单打印"
      :mask-closable="false"
      :destroy-on-close="true"
      :visible="visible"
      :footer="null"
      :width="950"
      @cancel="$emit('update:visible', false)"
    >
      <div id="print" style="color: black; line-height: 30px">
        <h2 style="text-align: center; font-weight: bold; font-size: 22px;margin-bottom: 0;">{{ storeName }}</h2>
        <a-row>
          <a-col :span="8"> 订单号：{{ order.order_no }} </a-col>
          <a-col :span="8"> 客户电话：{{ order.mobile }} </a-col>
          <a-col :span="8"> 下单时间：{{ order.created_at }} </a-col>
        </a-row>
        <a-row>
          <a-col :span="8"> 客户： {{ order.nickname }}</a-col>
          <a-col :span="8"> 支付方式：{{ order.pay_type_name }} </a-col>
          <a-col :span="8"> 客户地址：{{ order.address }} </a-col>
        </a-row>
        <table class="goods_table" cellpadding="5" cellspacing="5" width="100%">
          <thead>
            <tr>
              <td style="background: #ccc" v-for="(th, index) in tHead" :key="index">{{ th }}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in order.goods_list" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.attr_list.map((el) => el.attr_name).join(',') }}</td>
              <td v-if="colspan === '7'">{{ item.food_ext_goods.map((el) => el.name + 'x' + el.num).join(',') }}</td>
              <td><img v-if="item.code_path" :src="item.code_path" alt="" style="width: 202px; height: 30px" /></td>
              <td>{{ item.unit }}</td>
              <td>{{ item.num }}</td>
              <!-- <td>{{ item.total_price }}</td> -->
              <td>{{ item.total_price }}</td>
            </tr>
            <tr v-if="order.discount_text">
              <td colspan="7">本次优惠明细：{{ order.discount_text }}</td>
            </tr>
            <tr style="font-weight:800">
              <td colspan="6" v-if="order.pay_type == 2 && order.is_pay == 0 && print_setting.not_pay_notice">{{ print_setting.not_pay_notice }}</td>
              <td colspan="6" v-else-if="order.is_pay == 1 && print_setting.pay_notice">{{ print_setting.pay_notice }}</td>
              <td colspan="6" v-else>订单总金额</td>
              <td>{{ order.pay_price }}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr class="thead-tr">
              <td :colspan="print_setting.qrcode_show ? 5 : 7" style="font-size:12px;line-height: initial;">
                <div>联系电话：{{ order.store.contact_tel }}</div>
                <div>商家地址：{{ order.store.address }}</div>
                <div v-if="print_setting.note_show">产品说明：{{ print_setting.note }}</div>
              </td>
              <td colspan="2" v-if="print_setting.qrcode_show">
                <div class="qrcode">
                  <!-- 小程序码 -->
                  <img v-if="order.qrcode" :src="order.qrcode.mini_qrcode" alt="">
                  <!-- 二维码 -->
                  <img v-if="order.qrcode" :src="order.qrcode.qrcode" alt="" style="margin-left:10px">
                </div>
              </td>
            </tr>
          </tfoot>
        </table>
        <!-- <a-row style="margin-bottom: 10px">
          <a-col :span="12">
            <div>联系电话：17090402350</div>
            <div>地址：赤店</div>
            <div>产品注明：赤店版权所有</div>
          </a-col>
          <a-col :span="12">
            <img src="" style="width: 50%" />
            <img src="" style="width: 50%" />
          </a-col>
        </a-row> -->
      </div>
      <div style="text-align: center">
        <a-button v-print="'#print'" type="primary">确认打印</a-button>
        <a-button style="margin-left: 10px" type="danger" @click="$emit('update:visible', false)">取消打印</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import storage from 'store'
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    order: {
      type: Object,
      default: '',
    },
    print_setting:{
      type:Object,
      default:{
        note_show:0,
        note:'',
        qrcode_show:0,
        not_pay_notice:'',
        pay_notice:''
      }
    }
  },
  data() {
    return {
      tHead: ['序', '产品名称', '规格', '条码', '单位', '数量', '金额'],
      colspan: '6',
    }
  },
  computed: {
    storeName() {
      return storage.get('storeName')
    },
  },
  watch: {
    visible(e) {
      if (e) {
        let tHead = ['序', '产品名称', '规格', '条码', '单位', '数量', '金额'],
          colspan = '6'
        if (this.order.goods_list.some((el) => el.food_ext_goods && el.food_ext_goods.length)) {
          tHead.splice(3, 0, '加料')
          colspan = '7'
        }

        this.tHead = tHead
        this.colspan = colspan
      }
    },
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
    printBut() {
      this.$print(this.$refs.print)
    },
  },
}
</script>

<style scoped lang="less">
.goods_table {
  margin: 10px 0;
  color: black;
  // border: 1px solid black;
  // border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
  td {
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: black;
  }
}
.thead-tr{
  td{
    border:none;
  }
}
.qrcode{
  display: flex;
  justify-content: right;
  img{
    width:100px;
    height:100px;
  }
}
</style>
